<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7 no-js" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8 no-js" lang="en-US">
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Basic need -->
    <title>电影信息门户</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <link rel="profile" href="#">

    <!--Google Font-->
    <link rel="stylesheet" href='/movie/css/google-font-css.css'/>
    <!-- Mobile specific meta -->
    <meta name=viewport content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone-no">

    <!-- CSS files -->
    <link rel="stylesheet" href="/movie/css/plugins.css">
    <link rel="stylesheet" href="/movie/css/style.css">

</head>
<body>
<!--preloading-->
<div id="preloader">
    <img class="logo" src="/movie/images/logo1.png" alt="" width="119" height="58">
    <div id="status">
        <span></span>
        <span></span>
    </div>
</div>
<!--end of preloading-->


<div id="movie-header"></div>

<div class="hero common-hero">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="hero-ct">
                    <h1> 电影分类列表</h1>
                    <ul class="breadcumb">
                        <li class="active"><a href="/">首页</a></li>
                        <li><span class="ion-ios-arrow-right"></span> 电影列表</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="page-single">
    <div class="container">
        <div class="row ipad-width">
            <div class="col-md-8 col-sm-12 col-xs-12">
                <div class="topbar-filter">
                    <p>总共 <span th:text="${movieCount}">1,608 movies</span> 部电影</p>
                    <label>电影类型 :</label>
                    <select onchange="loadMovieListGridFragment()" id="select-movie-type">
                        <option th:each="type:${movieTypeList}"
                                th:text="${type.typeName}"
                                th:value="${type.id}">
                        </option>
                    </select>
                    <a href="moviegrid.html" class="grid"><i class="ion-grid active"></i></a>
                </div>
                <div id="list-grid-main">
                </div>

            </div>
            <div class="col-md-4 col-sm-12 col-xs-12">
                <div class="sidebar">
                    <div class="searh-form">
                        <h4 class="sb-title">按条件查找</h4>
                        <form class="form-style-1" action="#" id="form-query-condition">
                            <div class="row">
                                <div class="col-md-12 form-it">
                                    <label>电影名称</label>
                                    <input type="text" name="movieName" placeholder="请输入关键字">
                                </div>
                                <div class="col-md-12 form-it">
                                    <label>电影类型</label>
                                    <div class="group-ip">
                                        <select
                                                name="typeId" class="col-md-12 form-it">
                                            <option th:each="movieType :${movieTypeList}"
                                                    th:value="${movieType.id}"
                                                    th:text="${movieType.typeName}">电影类型
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-12 form-it">
                                    <label>电影评分</label>
                                    <select name="rate">
                                        <option value="8.0">8分以上</option>
                                        <option value="5.0">5分以上</option>
                                    </select>
                                </div>
                                <div class="col-md-12 form-it">
                                    <label>发布年份</label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <input type="text" name="startYear" style="text-align: center" value="2010">
                                        </div>
                                        <div class="col-md-6">
                                           <input type="text" name="endYear" style="text-align: center" value="2018">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 ">
                                    <input class="submit" type="button" value="开始查找" onclick="queryMovieByCondition()">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="ads">
                        <img src="/movie/images/uploads/ads1.png" alt="">
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<div id="movie-footer"></div>

<script src="/movie/js/jquery.js"></script>
<script src="/movie/js/plugins.js"></script>
<script src="/movie/js/plugins2.js"></script>
<script src="/movie/js/custom.js"></script>
<script src="/movie/js/do.js"></script>
<script src="/movie/js/movie.js"></script>
</body>

</html>
<script>
    loadMovieHeader();
    loadMovieListGridFragment();
</script>